<script setup>
import useCityStore from "@/store/modules/city";

const router = useRouter();

// 点击获取当前位置
const positionClick = () => {
  navigator.geolocation.getCurrentPosition(
    (res) => {
      console.log("获取位置成功:", res);
    },
    (err) => {
      console.log("获取位置失败:", err);
    },
    {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0,
    }
  );
};
const cityClick = () => {
  router.push("/city");
};
// 当前城市
const cityStore = useCityStore();
const { currentCity } = storeToRefs(cityStore);
</script>

<template>
  <div class="location">
    <div class="city" @click="cityClick">{{ currentCity.cityName }}</div>
    <div class="position" @click="positionClick">
      <span class="text">我的位置</span>
      <img src="@/assets/img/home/icon_location.png" alt="" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.location {
  display: flex;
  align-items: center;
  height: 44px;
  font-size: 12px;
  padding: 0 20px;
  .city {
    flex: 1;
    color: #333;
  }
  .text {
    color: #666;
  }
  .position {
    width: 74px;
    display: flex;
    align-items: center;
    img {
      margin-left: 5px;
      width: 18px;
      height: 18px;
      position: relative;
      top: -1px;
    }
  }
}
</style>
